<template>
  <nav class="main-nav f-fs-c">
    <router-link :to="`/brandZone/${brand.id}`" v-for="(brand,ind) in brands" :key="ind">{{brand.text}}</router-link>
  </nav>
</template>
<script>
export default {
  name: "MainNav",
  data() {
    return {
    };
  },
  computed:{
    brands(){
      return this.$store.state.brands;
    }
  },
  created(){
  },
  mounted(){
  }
};
</script>
<style lang="scss" scoped>
nav {
  height: 50px;
  line-height: 50px;
  background: $theme-color;
  border-radius: $border-radius-base;
  a {
    color: #ffffff;
    margin: 0 1em;
    font: {
      size: 20px;
    }
    &:hover{
      color: #ffffff;
      text-decoration: underline;
    }
  }
}
</style>